<template>
    <view class="navi-title">
        <view class="title-left">
            <view class="line"></view>
            <text class="title-left-text">{{ title }}</text>
        </view>
        <view class="count">
            <text>{{ count }}</text>
        </view>
    </view>
</template>

<script lang="ts">
import Vue from "vue"

export default Vue.extend({
    props: {
        title: String,
        count: Number,
    },
})
</script>

<style scoped>
.navi-title {
    display: flex;
    justify-content: space-between;
    width: 750rpx;
    height: 100rpx;
    align-items: center;
    border-radius: 12rpx 12rpx 0 0;
}

.line {
    width: 8rpx;
    height: 28rpx;
    background: #3963bc;
    border-radius: 0px 6rpx 6rpx 0px;
    margin-right: 22rpx;
}

.title-left {
    display: flex;
    align-items: center;
}

.title-left .title-left-text {
    font-size: 28rpx;
    color: #3683d6;
}

.count {
    width: 44rpx;
    height: 44rpx;
    background: rgba(223, 237, 255, 1);
    font-size: 28rpx;
    color: #3963bc;
    text-align: center;
    margin-right: 32rpx;
    line-height: 44rpx;
    border-radius: 50%;
}
</style>